<template>
  <span>
    <template v-for="(item, index) in dictNameList">
      <span
          v-if="item.elTagType == 'default' || isEmpty(item.elTagType)"
          :key="item.value"
          :index="index"
          :class="item.elTagClass"
      >
        {{ item.label }}
      </span>
      <el-tag
          v-else
          :disable-transitions="true"
          :key="item.value + ''"
          :index="index"
          :type="item.elTagType || 'primary'"
          :class="item.elTagClass"
      >{{ item.label }}</el-tag>
      {{ index + 1 < dictNameList.length ? '，' : '' }}
    </template>
  </span>
</template>

<script lang="ts" setup>
  import { PropType } from "vue";

  const props = defineProps({
    // 数据
    options: {
      type: Array as PropType<DictRecord[]>,
      default: null,
    },
    // 当前的值
    value: [Number, String, Array, Boolean],
  })

  const values = computed(() => {
    if (props.value !== null && typeof props.value !== 'undefined') {
      return Array.isArray(props.value) ? props.value.map(item => String(item)) : [String(props.value)];
    } else {
      return [];
    }
  })

  const dictNameList = computed(() => {
    let nameList = []
    props.options.forEach((item, index) => {
      if (values.value.includes(String(item.value))) {
        nameList.push(item)
      }
    })
    if(!nameList.length){
      let nameItem = {
        elTagType: "",
        label: props.value,
        value: ""
      }
      nameList.push(nameItem);
    }
    return nameList;
  })

</script>

<style lang="scss" scoped>
  div {
    display: initial;
  }

  .el-tag + .el-tag {
    margin-left: 10px;
  }
</style>
